<script setup lang="ts">
import { SyncOutlined, ImportOutlined } from "@ant-design/icons-vue";
import { onMounted, reactive } from "vue";
import { BaseApi } from "@/apis/base.api";
import * as AntdIcons from "@ant-design/icons-vue";
import { UtilTool } from "@webxue/common";
import { Modal } from "ant-design-vue";
import { useConfigStore } from "@/stores/config.store";

const emits = defineEmits(["select"]);
const props = defineProps({
  // 列数量
  colCount:{ type:Number, default: 6 }
});

const iconObj = reactive({
  activeTab: "antd",
  tabOptions: [
    { label: "ant-design", value: "antd" },
    { label: "iconfont", value: "iconfont" }
  ],
  dataSource:[],
  loading: false,
  async setDataSource(){
    const response = await BaseApi.icon.list({
      queryType:"all",
      from: iconObj.activeTab
    });
    iconObj.dataSource = response.data;
  },
  // 更新antd图标
  async updateAntdIcon(){
    iconObj.loading = true;
    // 剔除一些非图标元素
    const antdIconKeys = Object.keys(AntdIcons).filter(iconName => {
      return !["default","createFromIconfontCN"].includes(iconName);
    })
    await BaseApi.icon.updateAntdIcon({
      classNames:antdIconKeys.join(",")
    })
    await iconObj.setDataSource();
    iconObj.loading = false;
  },
  // 导入iconfont图标
  async importIconfont(){
    iconObj.loading = true;
    const files = await UtilTool.getFile(".zip");
    if(!files.length) return Modal.error({ title: "温馨提示", content:"请选择zip文件" });
    const iconZip = files[0];
    // 导入iconfont
    await BaseApi.icon.importIconfont({
      file:iconZip
    });
    // 更新字体图标文件加载
    useConfigStore().loadCSS(useConfigStore().publicConfigJson?.iconfontPath)
    // 刷新列表
    await iconObj.setDataSource();
    iconObj.loading = false;
  },
  // 图标选择
  select(icon:any){
    emits("select", icon);
  }
});

onMounted(async () => {
  await iconObj.setDataSource();
})
</script>

<template>
  <div class="h-full flex flex-col gap-2 bg-white">
    <!-- 选项卡 -->
    <div class="flex items-center justify-between w-full p-2 flex-shrink-0">
      <ATabs
        class="flex-1"
        v-model:activeKey="iconObj.activeTab"
        @change="iconObj.setDataSource"
      >
        <ATabPane
          v-for="iconOption in iconObj.tabOptions"
          :key="iconOption.value"
          :tab="iconOption.value"
        />
      </ATabs>
      <div>
        <AButton type="primary" v-if="iconObj.activeTab === 'antd'" @click="iconObj.updateAntdIcon"><SyncOutlined /> 更新antd图标</AButton>
        <AButton type="primary" v-if="iconObj.activeTab === 'iconfont'" @click="iconObj.importIconfont"><ImportOutlined /> 导入iconfont图标</AButton>
      </div>
    </div>
    <!-- 图标集合 -->
    <div class="p-2 overflow-y-auto flex-1">
      <ASpin :spinning="iconObj.loading">
        <WebxGridList :dataSource="iconObj.dataSource" :colCount="colCount" :showFooter="() => false" :showTitle="() => false">
          <template #content="data">
            <div class="flex flex-col justify-center items-center" @click="iconObj.select(data)">
              <WebxIcon class="text-2xl" :name="iconObj.activeTab + ':' + data.className" />
              <div class="text-sm text-gray-500">{{ data.name || data.className }}</div>
            </div>
          </template>
        </WebxGridList>
      </ASpin>
    </div>
  </div>
</template>

<style scoped lang="less">
:deep(.ant-tabs-nav){ margin-bottom: 0;
  &:before{ display: none; }
}
</style>
